<template>
  <div class="CourseList">
    <div class="f-r a-c j-e">
      <el-button type="primary" @click="addItem" style="margin-bottom: 20px;" :disabled="!!!this.businessId">添加章节</el-button>
    </div>
    <div class="mobile-container">
      <div class="module" v-for="(item,index) in moduleList">
        <div class="module-header f-r a-c">
          <div class="module-section"></div>
          <span class="module-name">章节名称</span>
           <div class="f-r">
             <el-input v-model="item.name" placeholder="请输入章节名称"></el-input>
             <div style="margin: 0 10px"></div>
             <el-input v-model="item.sort" placeholder="请输入章节排序"></el-input>
             <el-button type="primary" @click="saveModule(item)" style="margin-left: 10px" size="mini">保存章节</el-button>
             <el-button type="danger" @click="deleteModule(index)" size="mini">删除章节</el-button>
           </div>
          <div class="f-g f-r a-c j-e">
            <el-button type="primary" @click="addCourseItem(index)">添加内容</el-button>
          </div>
        </div>
        <div class="module-list">
          <div class="module-item" v-for="(subItem,subIndex) in item.CourseItems">
            <el-form label-position="top">
              <el-row :gutter="12">
                <el-col :span="8">
                  <el-form-item label="内容类型">
                    <el-select v-model="subItem.type" style="width: 100%">
                      <el-option label="视频" value="video"></el-option>
                      <el-option label="音频" value="music"></el-option>
                      <el-option label="图文" value="text"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="标题">
                    <el-input v-model="subItem.name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="时长">
                    <el-input v-model="subItem.duration"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="简介">
                    <el-input type="textarea" v-model="subItem.description"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="文件">
                    <FileUpload v-model="subItem.file_url"/>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="封面">
                    <FileUpload v-model="subItem.post_url"/>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="内容">
                    <RichEditor v-model="subItem.content" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="">
                    <div style="text-align: center">
                      <el-button type="danger" @click="deleteCourseItem(index,subIndex)">删除</el-button>
                      <el-button type="primary" @click="saveCourseItem(item,subItem)">保存</el-button>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {http} from "@/api";

export default {
  name: "CourseList",
  props: {
    businessId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      moduleList: []
    }
  },
  watch: {
    businessId: {
      handler: function (val) {
        if (!val) {
          this.moduleList = []
          return
        }
        this.getModuleList()
      },
      immediate: true
    }
  },
  methods: {
    getModuleList() {
      http.courseChapter.list({
        courseId: this.businessId
      }).then(res => {
        this.moduleList = res.data
      })
    },
    addItem() {
      this.moduleList.push({
        id: undefined,
        name: '',
        sort: '',
        CourseItems: []
      })
    },
    addCourseItem(index) {
      if (!this.moduleList[index].id) {
        this.$message.error('请先保存章节')
        return
      }
      this.moduleList[index].CourseItems.push({
        course_module_id: this.moduleList[index].id,
        id: undefined,
        type: 'video',
        name: '',
        description: '',
        content: '',
        CourseItems: []
      })
    },
    saveModule(item) {
      if (!this.businessId) {
        this.$message.error('请先保存课程')
        return
      }
      http.courseChapter[item.id ? 'update' : 'create'](item.id, {
        ...item,
        course_id: this.businessId
      }).then(res => {
        this.$message.success('操作成功')
        item.id = res.data.id
      })
    },
    async deleteModule(index) {
      // 确认删除框
      await this.$confirm('确认删除该章节吗?删除章节及以下所有内容', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.moduleList[index].id) {
          await http.courseChapter.delete(this.moduleList[index].id)
        }
        this.moduleList.splice(index, 1)
        this.$message.success('删除成功')
      })
    },
   async deleteCourseItem(index, subIndex) {
     await this.$confirm('确认删除该内容吗？', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(async () => {
       if (this.moduleList[index].CourseItems[subIndex].id) {
         await http.courseItem.delete(this.moduleList[index].CourseItems[subIndex].id)
       }
       this.moduleList[index].CourseItems.splice(subIndex, 1)
       this.$message.success('删除成功')
     })

    },
    saveCourseItem(item, subItem) {
      http.courseItem[subItem.id ? 'update' : 'create'](subItem.id, {
        ...subItem,
        course_module_id: item.id,
        course_id: this.businessId
      }).then(res => {
        this.$message.success('操作成功')
        subItem.id = res.data.id
      })
    }
  }
}
</script>

<style lang="scss">
.mobile-container {
  .module-item {
    padding: 16px;
  }
  .module {
    padding: 24px;
    border: 1px solid #ebeef5;
    margin: 10px 0;
  }
  .module-section {
    width: 6px;
    height: 18px;
    background-color: #3CAA49;
    margin-right: 10px;
    border-radius: 2px;
  }
  .module-name {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    margin-right: 10px;
  }
}
</style>
